﻿<html>
<head>
    <title></title>
    <script src="jquery-1.10.2.js" type="text/javascript"></script>
    <script src="jquery-ui-1.10.1.min.js" type="text/javascript"></script>
    <script src="splitscreen.js" type="text/javascript"></script>
    <style  type="text/css">
        table,td{
            border: 1px solid red;
        }
        div{
            border: 1px solid blue;
        }
        .myclass{
            width:200px;
            height:200px;
        }

    </style>
    <script>
        /**
         * 拖拽参考资料：
         * http://stackoverflow.com/questions/11724908/jquery-ui-draggable-and-adding-class-on-drag-event
         * http://stackoverflow.com/questions/7206622/add-css-class-to-an-element-while-dragging-over-w-jquery
         * http://www.authorcode.com/swap-elements-when-drag-one-onto-another-using-jquery-ui/
         */
        var mcu = VideoMCU();


        function init() {
             mcu.init({
                "defaultImgPath": "defaultConf.bmp",
                "videoContainerId": "videoContainer"
            });

            var user1 = {"userId": "weichi", "userName": "魏驰", "videoPosition": 1, "videoURL": "movie1.ogg"};
            var user2 = {"userId": "lijinze", "userName": "李金泽", "videoPosition": 2, "videoURL": "movie1.ogg"};
            var user3 = {"userId": "liuxi", "userName": "刘玺", "videoPosition": 3, "videoURL": "movie1.ogg"};
            var user4 = {"userId": "sunsiyuan", "userName": "孙思远", "videoPosition": 4, "videoURL": "movie1.ogg"};
            var user5 = {"userId": "fangkun", "userName": "方堃", "videoPosition": 5, "videoURL": "movie1.ogg"};
            var userInfos = [user1, user2, user3, user4, user5];
            mcu.SplitVideoScreen(7, userInfos);
        }

        $(function () {
            var originalElementHtml;
            init();
            //initSwap();
            function initSwap() {
                initDroppable($("div[id^='div1_']"));
                initDraggable($("div[id^='div1_']"));
            }

            function initDraggable($elements) {
                $elements.draggable({
                    appendTo: "body",
                    helper: "original",
                    cursor: "move",
                    revert: "invalid",
                    start: function(event,ui){
                        originalElementHtml = $(this).parent().html();
                    }
                });
            }

            function initDroppable($elements) {
                $elements.droppable({
                    activeClass: "ui-state-default",
                    hoverClass: "ui-drop-hover",
                    accept: ":not(.ui-sortable-helper)",
                    drop: function (event, ui) {
                        var targetHtml = $(this).parent().html();
                        $(this).parent().html(originalElementHtml);
                        $(ui.draggable).parent().html(targetHtml);
                        initSwap();
                    }
                });
            }

            function swapElement(ele1,ele2){
                var ele1Parent = ele1.parent();
                var ele2Parent = ele2.parent();

                var ele1Html = ele1Parent.html();
                ele1Parent.html(ele2Parent.html());
                ele2Parent.html(ele1Html);
            }
        });
    </script>

</head>
<body>
<div id="videoContainer"/>
</body>
</html>